<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>jscript07문서객체모델</title>
	</head>

	<body>
<h3>문서객체 모델DOM</h3>
<p>브라우저는 HTM문서를 읽으면 내부적으로 문서객체모델을 생성함</p>
<p>문서 객체 모델은 html태그와 텍스트를 객체화해서 계층적으로 표현한 것을 의미</p>
<p>자바스크립트와 DOM으로 HTML문서의 모든 요소를 다루거나 변경할 수 있게 해줌</p>
<p>문서객체모델에는 core DOM,XML DOM, HTML DOM,으로 분류</p>
<p>HTML DOM으로 html문서의 모든 요소(태그)와 속성, 스타일을 추가,변경,삭제할 수 있고, 심지어 이벤트도 추가,삭제할 수 있음</p>
	
<hr />
<h3>DOM basic</h3>
<p>DOM에서 html의 모든 요소는 객체로 취급</p>
<p>요소를 선택하려면 document 객체에서 제공하는 여러 메소드를 사용하면됨</p>
<p>getElementById() : id로 객체 선택</p>
<p>getElementByTagName(): 태그명으로 객체선택</p>
<p>getElementByClassName() : 클래스명으로 객체선택(IE8 이하는 지원x)</p>
<p>forms[]: 폼요소로 객체선택</p>
<p>images[]: 이미지 요소로 객체 선택</p>
<p>anchors[]: 링크 요소로 객체 선택</p>

<p id="find2id"> </p><button type="button" onclick="findid()">id로 찾기</button>
<span> </span> <button type="button" onclick="findtag()">태그로 찾기</button>


<form name="login"><input type="text" name="uid"/><input type="password" name="upwd"/><button type="button" onclick="checklogin()" >입력완료</button></form>
<script type="text/javascript">
	function findid(){
		var find2id=document.getElementById("find2id");
		find2id.innerHTML+="이글이보이시나요";
	}
	function findtag(){
		var span = document.getElementsByTagName("span");
		span[0].innerHTML +="이글도 보이나요";
			}
	function checklogin(){
		var frm=document.forms.login;
		if(frm.uid.value=="")
		alert("아이디를 입력하세요");
		else if(frm.upwd.value=="")
		alert("비밀번호 입력하세요");
		else 
		alert("입력한 정보는 :"+frm.uid.value+"\n"+frm.upwd.value);
	}
</script>

<h3>DOM 출력제어</h3>
<p>document.write() : html 출력스트림에 쓰기(비추!)<br /> </p>
<p>객체명.innerHTML : html요소의 내용변경</p>
<p>객체명.attribute : 요소의 속성 변경</p>
<p>객체명.style.attribute : html 요소의 스타일 변경</p>
<img src="images/100.gif"/><button type="button" onclick="chgimg()">그림바꾸기 </button>

<h2>Welcome to HTML DOM!!</h2>
<button type="button" onclick="chgh2()">스타일바꾸기</button>

<button type="button" onclick="modal()">모달창 만들기</button>


<script type="text/javascript">
	document.write("이ㅣ글");
	function chgimg(){
		var img=document.getElementsByTagName("img");
		img[0].src="images/101.gif";
	}
	
	function chgh2(){
		var h2 =document.getElementsByTagName("h2");
		h2[0].style.color="blue";
		h2[0].style.fontStyle="italic";
		h2[0].style.textDecoration="underline";
		
	}
	
	function modal(){
		var shadow=document.getElementById("shadow");
		var popup=document.getElementById("popup");
		
		var d1=document.documentElement;
		var d2=document.body;
		var sx=Math.max(d2.clientWidth,d1.offsetWidth,d2.offsetWidth,d1.scrollWidth,d2.scrollWidth);
		var sy=Math.max(d2.clientHeight,d1.offsetHeight,d2.offsetHeight,d1.scrollHeight,d2.scrollHeight);
		
		//offsetWidth, offsetHeight
		//화면에서 보여지는 영역크기
		//MSIE의 DHTML Object Model
		
		//clientWidth, clientHeight
		//화면에서 보여지는 영역에서
		//테두리만을 제외한 크기
		//MSIE의 DHTML Object Model
	
		//scrollWidth, scrollHeight
		//화면에서 보여지는 스크롤 영역
		//MSIE의 DHTML Object Model
	
		
		shadow.style.width=sx+"px";
		shadow.style.height=sy+"px";
		shadow.style.top=0;
		
		shadow.style.left=0;
		shadow.style.background="black";
		shadow.style.position="absolute";
		shadow.style.opacity="0.7";
		
		var cx=(screen.availWidth/2)-175;
		var cy=(screen.availHeight/2)-125;
		popup.style.width="350px";
		popup.style.height="250px";
		popup.style.top=cy+"px";
		popup.style.left=cx+"px";
		popup.style.background="white";
		popup.style.position="absolute";
		popup.style.opacity="0.7";
		
		shadow.style.display="block";
		popup.style.display="block";
	}
	function cmodal(){
		var shadow=document.getElementById("shadow");
		var popup=document.getElementById("popup");
		shadow.style.display="none";
		popup.style.display="none";
		
	}
	
	</script>
	
	<div id="shadow" style="display:none"> </div>
	<div id="popup" style="display:none"><button type="button" onclick="cmodal()">닫기</button></div>
	
</body>



</html>
